<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h1>{{num}}</h1>
  <button @click="addnum">++</button>
  <div>{{user}}</div>
  <button @click="changeuser">修改对象</button>
  <div>{{getcount}}</div>
 
</template>

<!-- <script >
export default {
  name: 'App',

  setup(){
    // 定义数据  方法
    // return {
    // ...
    // }
  }
  component:{
    
  }
}
</script> -->
<script setup>
import {ref,reactive,watch,computed} from "vue"
import {onMounted} from "vue"
// setup属性  是setup函数的语法糖 当script标签添上setup属性时，模板使用的响应式数据，不需要再 return了
// 注意：vue3已经废弃了过滤器  如果实现过滤功能，vue3使用函数
let num = ref(0)
let user = reactive({
  uanme:'admin',
  pwd:'123456'
})

function addnum(){
  console.log('1111111111111')
  num.value++
}

function changeuser(){
  console.log('33333333333333')
  user.pwd="22222"
}

watch(num,(n,o)=>{
  console.log(n)
  console.log(o)
})

let getcount = computed(()=>{
  return num.value + 900
})
onMounted(()=>{
  console.log('渲染后，用于发请求拿数据  操作dom节点')
})
</script>

<style>

</style>
